<template>
    <div>
        <div class="normal-box-bd">
            <div class="normal-list-page-mod">
                <div class="normal-list-page-bd">
                    <Table :columns="columns"
                           :data="list.data"
                           border></Table>
                </div>
                <Page :total="queryData.totalRecord"
                      :current="queryData.page"
                      :page-size="queryData.limit"
                      show-total
                      show-elevator
                      show-sizer
                      @on-change="changePage"
                      @on-page-size-change="changePageSize"
                      style="text-align: center;" />
            </div>

             <!-- 新建子类 -->
            <Modal v-model="level2Modal.modal2"
                   :title="level2Modal.title"
                   @on-ok="postLevelTwoData"
                   @on-cancel="cancel">
                <Form :model="level2Modal.formData"
                      
                      :rules="level2Modal.ruleValidate"
                      ref="systemChildrenFro" :label-width="130">
                    <FormItem label="父类id:" v-if="level2Modal.isCreated == true"
                              >
                         <Input v-model="level2Modal.formData.parentId"
                               placeholder="" disabled style="width:300px;"></Input>

                    </FormItem>
                    <FormItem label="回收物品名称:"
                              prop="name">
                        <Input v-model="level2Modal.formData.name"
                               placeholder="请输入回收物品名称" style="width:300px;"></Input>

                    </FormItem>
                    <FormItem label="回收物品计量单位:"
                              prop="unit">
                        <Input v-model="level2Modal.formData.unit"
                               placeholder="如克、台、辆" style="width:300px;"></Input>
                    </FormItem>
                    <FormItem label="备注"
                              prop="desc">
                        <Input v-model="level2Modal.formData.description"
                               type="textarea"
                               :autosize="{minRows: 2,maxRows: 5}"
                               placeholder="说点什么吧..."  style="width:300px;"></Input>
                    </FormItem>
                </Form>
            </Modal>
        </div>
    </div>
</template>
<script>
import expandRowRow from './expandRowRow.vue'
import RecycleApi from '@/api/recycle/recycle.js'
export default {
	props: {
		row: Object
	},
	data() {
		return {
            queryData:{
                page:1,
                limit:10,
                parentId:0,
                level:2
            },
			columns: [
				{
					type: 'selection',
					width: 60,
					align: 'center'
				},
				{
					type: 'expand',
					width: 80,
					render: (h, params) => {
						return h(expandRowRow, {
							props: {
								row: params.row
							}
						})
					},
					title: '展开',
					align: 'center'
				},
				{
					title: 'id',
					key: 'id',
					align: 'center'
				},
                // {
				// 	title: '品类编码',
				// 	key: 'code',
				// 	align: 'center'
				// },
				{
					title: '品类名称',
					key: 'name',
					align: 'center'
				},
				
				{
					title: '计量单位',
					key: 'unit',
					align: 'center'
				},
                {
					title: '描述',
					key: 'description',
					align: 'center'
				},
				// {
				// 	title: '父类ID',
				// 	key: 'parentId',
				// 	align: 'center'
				// },
                // {
				// 	title: '四分类level',
				// 	key: 'level',
				// 	align: 'center'
				// },
				{
					title: '创建时间',
					key: 'createTime',
					align: 'center'
				},
				{
					title: '更新时间',
					key: 'updateTime',
					align: 'center'
				},
				/** 自动生成结束 */
				{
					title: '操作',
					align: 'center',
					minWidth: 150,
					render: (h, params) => {
						// 动态渲染组件
						// if (params.row.id == 94) {
						return h('div', { class: 'action-group' }, [
							h(
								'Tooltip',
								{
									props: {
										placement: 'left',
										content: '添加子类'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px',
												
											},
											on: {
												click: () => {
													this.showCreateChildrenModa(
														params.row
													)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type: 'md-add-circle',
													size: 18
												}
											})
										]
									)
								]
							),
							h(
								'Tooltip',
								{
									props: {
										placement: 'left',
										content: '编辑'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													this.showUpdateModal(
														params.row
													)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type:
														' iconfont icon-bianjisekuai',
													size: 18
												}
											})
										]
									)
								]
							),

							h(
								'Tooltip',
								{
									props: {
										placement: 'right',
										content: '删除'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'error',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													this.delData(params.row)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type:
														' iconfont icon-shanchusekuai',
													size: 18
												}
											})
										]
									)
								]
							)
						])
						// }
					}
				}
			],
            list: {
				data: [
					// {
					// 	code: 95,
					// 	name: '塑料',
					// 	unit: '斤',
					// 	description: '塑料',
					// 	level: 2,
					// 	parentId: 94,
                    //     // _disableExpand: true, //展开按钮禁用
					// },
					// {   code: 95,
					// 	name: '纸类',
						
					// 	unit: '斤',
					// 	description: '纸类',
                    //     level: 2,
					// 	parentId: 94
						
					// }
				]
			},
            level2Modal: {
                isCreated:false,
				modal2: false,
				title: '',
				formData: {

                },
                ruleValidate: {
					name: [
						{
							required: true,
							message: '回收物品名称不能为空',
						}
					],
					unit: [
						{
							required: true,
							message: '回收物品计量单位不能为空',
							trigger: 'blur'
						}
					]
				},
                options: [
					{
						value: 95,
						label: '纸类'
					},
					{
						value: 96,
						label: '塑料'
					},
					{
						value: 97,
						label: '金属'
					},
					{
						value: 98,
						label: '玻璃'
					},
                    {
						value: 99,
						label: '旧衣物'
					},
                    {
						value: 89,
						label: '其他可回收物'
					},
                    {
						value: 88,
						label: '废木材'
					},
                    {
						value: 87,
						label: '小家电'
					}     

				],
			},
		}
	},
	mounted() {
        this.getPageList()
    },
	computed: {},
	methods: {
        async getPageList() {
            this.queryData.parentId = this.row.id
			let data = (await RecycleApi.getPageList(this.queryData)).data
            this.list.data = data.list
            this.queryData.limit =  data.pageSize
            this.queryData.page =  data.pageNum
            this.queryData.totalRecord = data.totalRecord
		},
        showCreateChildrenModa(row){
           
            this.level2Modal.isCreated = true
            this.level2Modal.modal2 = true
            this.level2Modal.title = '新建子类'
            this.level2Modal.formData = {
				code: '',
				name: '',
				unit: '',
				description: '',
				level: 3,
				parentId: row.id
			}
        },
        showUpdateModal(row) {
            this.level2Modal.isCreated = false
			this.level2Modal.modal2 = true
			this.level2Modal.title = '编辑分类'
			this.level2Modal.formData = {
				id: row.id,
				code:row.code,
				name: row.name,
				unit: row.unit,
				description: row.description,
			}
		},
        changePage(page) {
            this.queryData.page = page
            this.getPageList()
		},
        changePageSize(pageSize) {
            this.queryData.limit = pageSize
            this.getPageList()
		},
        postLevelTwoData(){
            let that = this
			this.$refs['systemChildrenFro'].validate(valid => {
				if (valid) {
                    if(this.level2Modal.isCreated == true){
							RecycleApi.add(that.level2Modal.formData).then(res => {
								
								if (res.code == 0) {
									that.$Message.success('添加成功')
									that.level2Modal.modal2 = false
                                    that.getPageList()
									return
								}else{
                                    that.$Message.error(res.message)
                                }
                            })
                    }else if(this.level2Modal.isCreated == false){
                           // 修改
						RecycleApi.update(that.level2Modal.formData).then(res => {
							
							if (res.code == 0) {
								that.$Message.success('修改成功')
								that.level2Modal.modal2 = false
                                that.getPageList()
								return
							}else{
                                that.$Message.error(res.message)
                            }
						})
                    }
				} else {
					this.$Message.error('请填写完整的表单项')
				}
			})
        },
        // 删除
		delData(row) {
			this.$Modal.confirm({
				title: '确认删除',
				content:
					'<p>您确认删除id为 <strong>' +
					row.id.toString() +
					'</strong> 的 <strong>' +
					row.name.toString() +
					'</strong>吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
				loading: true,
				onOk: () => {
					RecycleApi.del(row.id).then(res => {
					this.$Modal.remove()
						if (res.code == 0) {
							this.$Notice.success({
								title: '删除成功'
							})
							this.queryData.page = 1
							this.getPageList()
						} else {
							this.$Notice.error({
								title: res.message
							})
						}
					})
				}
			})
		},
    }
}
</script>
<style scoped>
</style>
